<!--基础属性-->
<template>
    <div class="basics">
        <el-form
            size="mini"
            label-position="top"
            label-width="80px"
            :model="config"
            v-if="Object.keys(config).length > 0"
        >
            <el-form-item label="名称">
                <el-input
                    @input="
                        value => {
                            onChange('label', value)
                        }
                    "
                    clearable
                    v-model="config.label"
                ></el-input>
            </el-form-item>
            <el-form-item label="负责人">
                <div @click="showFzrAlert">sss</div>
            </el-form-item>
            <el-form-item label="知会">
                <el-input rows="3" type="textarea" clearable v-model="config.data.zh"></el-input>
            </el-form-item>
            <el-form-item label="会签">
                <el-input rows="3" type="textarea" clearable v-model="config.data.hq"></el-input>
            </el-form-item>
            <el-form-item label="审批意见" v-if="config.data.spyj">
                <el-radio-group
                    v-model="item.select"
                    size="mini"
                    v-for="(item, index) in config.data.spyj"
                    :key="index"
                    class="mb10"
                >
                    <el-radio-button :label="item.label" disabled></el-radio-button>
                    <el-radio-button
                        :label="item"
                        v-for="(item, indexs) in item.value"
                        :key="indexs"
                    ></el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="字段权限" v-if="config.data.qx">
                <el-row :gutter="0" class="head">
                    <el-col :span="10">字段</el-col>
                    <el-col :span="7">可见</el-col>
                    <el-col :span="7">可编辑</el-col>
                </el-row>
                <template>
                    <div v-for="(item, index) in config.data.qx" :key="index" class="mt10">
                        <el-row :gutter="0">
                            <el-col :span="10">{{ item.label }}</el-col>
                            <el-col :span="7">
                                <el-checkbox v-model="item.show"></el-checkbox>
                            </el-col>
                            <el-col :span="7">
                                <el-checkbox v-model="item.edit"></el-checkbox>
                            </el-col>
                        </el-row>
                        <el-divider></el-divider>
                    </div>
                </template>
            </el-form-item>
        </el-form>
        <StaffAlert :visible.sync="chooseStaffAlert" />
    </div>
</template>

<script>
import StaffAlert from '@/views/component/panel/component/StaffAlert'
export default {
    name: 'basics',
    components: { StaffAlert },
    props: {
        config: {
            type: Object
        },
        onChange: {
            type: Function,
            default: () => {}
        }
    },
    data () {
        return {
            chooseStaffAlert: true
        }
    },
    methods: {
        showFzrAlert () {
            this.chooseStaffAlert = true
        }
    }
}
</script>

<style scoped lang="scss">
@import '../../../../assets/css/base';

.basics {
}

.head {
    background: $color-gray;
}
</style>
